<template>
  <view class="payment-container">
    <!-- 顶部导航栏 -->
    <up-navbar :safeAreaInsetTop="true" :fixed="true" :border="false" bgColor="#12c284" placeholder>
      <template #left>
        <view class="navbar-left" @click="goBack">
          <u-icon name="arrow-left" size="20" color="#333"></u-icon>
        </view>
      </template>

      <template #center>
        <text class="navbar-title">{{ useT('收款码') }}</text>
      </template>

      <template #right>
        <!-- 右侧留空 -->
      </template>
    </up-navbar>

    <!-- 主要内容区域 -->
    <view class="content-wrapper">
      <!-- 收款卡片 -->
      <view class="payment-card">
        <!-- 二维码区域 -->
        <view class="qr-code-section">
          <view class="qr-code-container">
            <!-- 二维码 -->
            <view class="qr-code">
              <up-qrcode class="qr-code-item" cid="ex3" :size="200" :val="walletAddress"></up-qrcode>
            </view>
          </view>

          <!-- 金额显示 -->
          <view class="amount-display" v-if="amount">
            <text class="amount-label">{{ useT('收款金额') }}：</text>
            <image class="usdt-icon" src="@/static/home/usdt-icon.png" mode="aspectFit"></image>
            <text class="amount-value">{{ amount }}</text>
          </view>
        </view>

        <!-- 钱包地址显示区域 -->
        <view class="wallet-address-section">
          <text class="address-label">{{ useT('钱包地址') }}</text>
          <view class="address-container">
            <text class="wallet-address">{{ walletAddress }}</text>
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="operation-buttons">
          <view class="operation-item" @click="setAmount">
            <text class="operation-text">{{ useT('设置金额') }}</text>
          </view>
          <view class="operation-divider"></view>
          <view class="operation-item" @click="copyWalletAddress">
            <text class="operation-text">{{ useT('复制地址') }}</text>
          </view>
        </view>

        <!-- 分隔线 -->
        <view class="divider"></view>

        <!-- 收款记录 -->
        <view class="payment-records" @click="goToRecords">
          <view class="records-left">
            <text class="records-text">{{ useT('收款记录') }}</text>
          </view>
          <view class="records-right">
            <u-icon name="arrow-right" size="16" color="#999"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { useUserStore } from '@/stores/user.js';
import { generatePaymentAddress } from '@/utils/crypto.js';
import { useT } from '@/utils/i18n.js';
import { onLoad } from '@dcloudio/uni-app';
import { onMounted, ref } from 'vue';
const userStore = useUserStore();

// 用户数据
const userId = ref('12345'); // 这里应该从用户登录信息中获取
const amount = ref(null); // 设置的金额
const walletAddress = ref(''); // 加密后的钱包地址

// 页面加载时接收参数
onLoad((options) => {
  if (options.userId) {
    userId.value = options.userId;
  } else {
    userId.value = userStore.userInfo.uid;
  }
  if (options.amount) {
    amount.value = parseFloat(options.amount);
  }
});

// 生成钱包地址
const generateWalletAddress = () => {
  walletAddress.value = generatePaymentAddress(userId.value, amount.value || '');
  console.log('用户ID:', userId.value);
  console.log('金额:', amount.value);
  console.log('生成的支付地址:', walletAddress.value);
};

// 页面加载时生成钱包地址
onMounted(() => {
  generateWalletAddress();
});

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 设置金额
const setAmount = () => {
  uni.showModal({
    title: useT('设置收款金额'),
    editable: true,
    placeholderText: useT('请输入金额'),
    confirmText: useT('确定'),
    cancelText: useT('取消'),
    success: (res) => {
      if (res.confirm && res.content) {
        const inputAmount = parseFloat(res.content);
        if (isNaN(inputAmount) || inputAmount <= 0) {
          uni.showToast({
            title: useT('请输入有效的金额'),
            icon: 'none'
          });
          return;
        }
        amount.value = inputAmount;
        // 重新生成包含金额的二维码地址
        generateWalletAddress();
        uni.showToast({
          title: useT('金额设置成功'),
          icon: 'success'
        });
      }
    }
  });
};

// 复制钱包地址
const copyWalletAddress = () => {
  uni.setClipboardData({
    data: walletAddress.value,
    success: () => {
      uni.showToast({
        title: useT('钱包地址已复制'),
        icon: 'success'
      });
    },
    fail: () => {
      uni.showToast({
        title: useT('复制失败，请手动复制'),
        icon: 'none'
      });
    }
  });
};

// 跳转到收款记录
const goToRecords = () => {
  uni.navigateTo({
    url: '/pagesA/bill/bill'
  });
};
</script>

<style lang="scss" scoped>
.payment-container {
  min-height: 100vh;
  background: linear-gradient(to bottom, #12c284 0%, #0ea76c 100%);
  padding: 20rpx;
}

// 导航栏样式
.navbar-left {
  display: flex;
  align-items: center;
  padding: 8rpx;
}

.navbar-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

// 内容区域
.content-wrapper {
  padding: 32rpx 0;
  display: flex;
  justify-content: center;
}

// 收款卡片
.payment-card {
  width: 100%;
  max-width: 600rpx;
  background: #f8f6f0;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  position: relative;

  // 二维码区域
  .qr-code-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 40rpx;

    .qr-code-container {
      display: flex;
      justify-content: center;
      align-items: center;

      .qr-code {
        width: 200px;
        height: 200px;
        overflow: hidden;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 20rpx;
        background-color: #ffffff;
        border-radius: 12rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
      }
    }

    // 金额显示
    .amount-display {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20rpx;
      padding: 16rpx 24rpx;
      background-color: #ffffff;
      border-radius: 12rpx;
      border: 2rpx solid #e5e5e5;

      .amount-label {
        font-size: 28rpx;
        color: #666;
        margin-right: 8rpx;
      }

      .usdt-icon {
        width: 32rpx;
        height: 32rpx;
        margin-right: 8rpx;
      }

      .amount-value {
        font-size: 32rpx;
        color: #12c284;
        font-weight: 600;
      }
    }
  }

  // 钱包地址显示区域
  .wallet-address-section {
    margin-bottom: 40rpx;

    .address-label {
      display: block;
      font-size: 28rpx;
      color: #666666;
      margin-bottom: 16rpx;
    }

    .address-container {
      background: #ffffff;
      border-radius: 12rpx;
      padding: 24rpx;
      border: 2rpx solid #e5e5e5;

      .wallet-address {
        font-size: 28rpx;
        color: #333333;
        font-family: 'Courier New', monospace;
        word-break: break-all;
        line-height: 1.5;
      }
    }
  }

  // 操作按钮
  .operation-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32rpx;

    .operation-item {
      flex: 1;
      text-align: center;
      padding: 20rpx 0;

      .operation-text {
        font-size: 28rpx;
        color: #666;
        font-weight: 500;
      }
    }

    .operation-divider {
      width: 2rpx;
      height: 40rpx;
      background-color: #e0e0e0;
      margin: 0 20rpx;
    }
  }

  // 分隔线
  .divider {
    height: 2rpx;
    background-color: #f0f0f0;
    margin-bottom: 32rpx;
  }

  // 收款记录
  .payment-records {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;

    .records-left {
      .records-text {
        font-size: 28rpx;
        color: #666;
        font-weight: 500;
      }
    }

    .records-right {
      display: flex;
      align-items: center;
    }
  }
}
</style>
